<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			#head{
				height: 50px;
				background: #3366CC;
			}
			#head h4{
				color: white;
				margin-top: 10px;
			}
			.mui-bar-nav{
				box-shadow:none;
			}
			/*头像*/
			.imgbor{
				text-align: center;
				margin-top: 50px;
				background: #3366CC;
				height: 160px;
			}
			.imgbor img{
				width: 90px;
				height: 90px;
				border-radius: 50%;
			}
			.imgbor p{
				color: white;
				margin-top: 10px;
				margin-bottom: -10px;
			}
			/*内容*/
			.mui-bar-nav~.mui-content{
				padding: 0;
			}
			/*图标*/
			#ulma{
				background: white;
				margin-top: 0px;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
		<header class="mui-bar mui-bar-nav" id="head">
		    <h4 class="">我的</h4>
		</header>
		<div class="imgbor">
		    	<img src="images/53798299988865092.GIF" />
		    	<p>万里挑一</p>
		    	<p>6123456@qq.com</p>
		    </div>
		<div class="mui-content">
			<!--一-->
		    <ul class="mui-table-view mui-grid-view mui-grid-9" id="ulma">
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="myinformation">
		             <span class="mui-icon mui-icon mui-icon-loop"></span>
		            <div class="mui-media-body">我的信息</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="bookads">
		            <span class="mui-icon mui-icon-compose"></span>
		            <div class="mui-media-body">图书管理</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="userads">
		            <span class="mui-icon mui-icon-checkmarkempty"></span>
		            <div class="mui-media-body">用户管理</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="xujie">
		            <span class="mui-icon mui-icon mui-icon-plusempty"></span>
		            <div class="mui-media-body">我要续借</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="zhengjian">
		            <span class="mui-icon mui-icon mui-icon-flag"></span>
		            <div class="mui-media-body">我的证件</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="fuwu">
		            <span class="mui-icon mui-icon mui-icon-paperplane"></span>
		            <div class="mui-media-body">服务</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="helpBorrowing">
		            <span class="mui-icon mui-icon mui-icon mui-icon-reload"></span>
		            <div class="mui-media-body">自助借阅</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#" id="setup">
		            <span class="mui-icon mui-icon-gear"></span>
		            <div class="mui-media-body">设置</div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		        <a href="#">
		            <span class="mui-icon mui-icon mui-icon mui-icon-more"></span>
		            <div class="mui-media-body">更多</div>
		        </a>
		    </li>
		        </ul>
		        
		    
		</div>
		
	</body>
	<script>
		document.getElementById('myinformation').addEventListener('tap', function() {
		  //打开我的信息页面
		  mui.openWindow({
		    url: 'myinformation.html', 
		    id:'myinformation'
		  });
		});
		document.getElementById('bookads').addEventListener('tap', function() {
		  //打开图书管理页面
		  mui.openWindow({
		    url: 'bookads.html', 
		    id:'bookads'
		  });
		});
		document.getElementById('userads').addEventListener('tap', function() {
		  //打开用户管理页面
		  mui.openWindow({
		    url: 'usermanagement.html', 
		    id:'usermanagement'
		  });
		});
		document.getElementById('xujie').addEventListener('tap', function() {
		  //打开续借页面
		  mui.openWindow({
		    url: 'xujie.html', 
		    id:'xujie'
		  });
		});
		document.getElementById('helpBorrowing').addEventListener('tap', function() {
		  //打开自助借阅页面
		  mui.openWindow({
		    url: 'helpBorrowing.html', 
		    id:'helpBorrowing'
		  });
		});
		document.getElementById('setup').addEventListener('tap', function() {
		  //打开设置页面
		  mui.openWindow({
		    url: 'setup.html', 
		    id:'setup'
		  });
		});
		document.getElementById('fuwu').addEventListener('tap', function() {
		  //打开服务页面
		  mui.openWindow({
		    url: 'fuwu.html', 
		    id:'fuwu'
		  });
		});
		document.getElementById('zhengjian').addEventListener('tap', function() {
		  //打开证件页面
		  mui.openWindow({
		    url: 'zhengjian.html', 
		    id:'zhengjian'
		  });
		});
	</script>
<!--	<script>
		mui.init({
		subpages:[
			{
				url:"myinformation.html",
				id:"myinformation.html",
				styles:{
					top:"0px",
					bottom:"50px"
				}
			},
			{
				url:"bookads.html",
				id:"bookads.html",
				styles:{
					top:"0px",
					bottom:"50px"
				}
			},
			{
				url:"usermanagement.html",
				id:"usermanagement.html",
				styles:{
					top:"0px",
					bottom:"50px"
				}
			},
			{
				url:"xujie.html",
				id:"xujie.html",
				styles:{
					top:"0px",
					bottom:"50px"
				}
			},
			{
				url:"helpBorrowing.html",
				id:"helpBorrowing.html",
				styles:{
					top:"0px",
					bottom:"50px"
				}
			}
			
		],
		preloadPages:[
			
		]
	})
		
		var myinformation = document.getElementById('myinformation');
		var bookads = document.getElementById('bookads');
		var usermanagement = document.getElementById('usermanagement');
		var xujie = document.getElementById('xujie');
		var helpBorrowing = document.getElementById('helpBorrowing');
		
		myinformation.addEventListener('tap',function(){
		var myinformationPage = plus.webview.getWebviewById('myinformation.html');
		var bookadsPage = plus.webview.getWebviewById('bookads.html');
		var useradsPage = plus.webview.getWebviewById('usermanagement.html');
		var xujiePage = plus.webview.getWebviewById('xujie.html');
		var helpBorrowingPage = plus.webview.getWebviewById('helpBorrowing.html');
		plus.webview.show(myinformationPage);
		plus.webview.hide(bookadsPage);
		plus.webview.hide(useradsPage);
		plus.webview.hide(xujiePage);
		plus.webview.hide(helpBorrowingPage);
		})
		bookads.addEventListener('tap',function(){
		var myinformationPage = plus.webview.getWebviewById('myinformation.html');
		var bookadsPage = plus.webview.getWebviewById('bookads.html');
		var useradsPage = plus.webview.getWebviewById('usermanagement.html');
		var xujiePage = plus.webview.getWebviewById('xujie.html');
		var helpBorrowingPage = plus.webview.getWebviewById('helpBorrowing.html');
		plus.webview.show(bookadsPage);
		plus.webview.hide(myinformationPage);
		plus.webview.hide(useradsPage);
		plus.webview.hide(xujiePage);
		plus.webview.hide(helpBorrowingPage);
		})
		usermanagement.addEventListener('tap',function(){
		var myinformationPage = plus.webview.getWebviewById('myinformation.html');
		var bookadsPage = plus.webview.getWebviewById('bookads.html');
		var useradsPage = plus.webview.getWebviewById('usermanagement.html');
		var xujiePage = plus.webview.getWebviewById('xujie.html');
		var helpBorrowingPage = plus.webview.getWebviewById('helpBorrowing.html');
		plus.webview.show(useradsPage);
		plus.webview.hide(myinformationPage);
		plus.webview.hide(bookadsPage);
		plus.webview.hide(xujiePage);
		plus.webview.hide(helpBorrowingPage);
		})
		xujie.addEventListener('tap',function(){
		var myinformationPage = plus.webview.getWebviewById('myinformation.html');
		var bookadsPage = plus.webview.getWebviewById('bookads.html');
		var useradsPage = plus.webview.getWebviewById('usermanagement.html');
		var xujiePage = plus.webview.getWebviewById('xujie.html');
		var helpBorrowingPage = plus.webview.getWebviewById('helpBorrowing.html');
		plus.webview.show(xujiePage);
		plus.webview.hide(myinformationPage);
		plus.webview.hide(bookadsPage);
		plus.webview.hide(useradsPage);
		plus.webview.hide(helpBorrowingPage);
		})
		helpBorrowing.addEventListener('tap',function(){
		var myinformationPage = plus.webview.getWebviewById('myinformation.html');
		var bookadsPage = plus.webview.getWebviewById('bookads.html');
		var useradsPage = plus.webview.getWebviewById('usermanagement.html');
		var xujiePage = plus.webview.getWebviewById('xujie.html');
		var helpBorrowingPage = plus.webview.getWebviewById('helpBorrowing.html');
		plus.webview.show(helpBorrowingPage);
		plus.webview.hide(myinformationPage);
		plus.webview.hide(bookadsPage);
		plus.webview.hide(useradsPage);
		plus.webview.hide(xujiePage);
		})
	</script>-->

</html>